iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
0
自我挑戰組

從零開始的Flutter世界系列 第 2

Day02 建構Flutter的開發環境

  • 分享至 

  • xImage
  •  

官網的安裝文件 → 各個電腦作業系統都有安裝的教學,本文將介紹的是使用macOS來安裝Flutter

前言

如果你的macOS 版本為macOS Catalina,請更改終端機的Shell 為zsh ,原由可參考Why does macOS Catalina use Zsh instead of Bash? Licensing,流程就不介紹了,可參考 bash to zsh 設定流程Mac OS 終端機美化(Mac OS Terminal)

Step 1. 下載 Flutter SDK

在官網選擇安裝macOS環境後,會提供現在最新版本的Flutter 給我們下載,之後把下載完的壓縮檔解壓縮至想存放的位置。

沒想法的話可以建立一個名為Developer 的資料夾放在 /Users/[使用者名稱]/ 下,並解壓縮的SDK放置在 /Users/[使用者名稱]/Developer下

Step 2. 設定Flutter 指令路徑

參考官網上的 Update your path,首先,打開終端機吧

  1. 編輯zsh終端機的配置文件

    輸入指令:

    vim ~/.zshrc
    
  2. 在配置文件底下設定路徑,先輸入 i 進入 INSERT 模式,並新增:

    export PATH="$PATH:[存放Flutter SDK 的路徑]/flutter/bin"
    

    我的範例為:

    export PATH="$PATH:$HOME/Developer/flutter/bin"
    

    $HOME:相對應為 [使用者名稱]/d

    完成後 按 Esc 退出 INSERT 模式,之後輸入 :wq! 儲存並離開回到終端機
    Yes

  3. 重新開啟終端機

    輸入指令:

    which flutter dart
    

    即會出現你的 flutter 與dart 的路徑,確保Flutter 可以成功運作指令

    /Users/ryder0604/Developer/flutter/bin/flutter
    /Users/ryder0604/Developer/flutter/bin/dart
    

    若出現dart的路徑為/usr/local/bin/dart,代表已下載過Dart SDK了,但這樣子有可能發生Flutter 版本與下載過的Dart 版本不相容的問題,且從Flutter 的1.19.0開發版本開始,我們下載的Flutter SDK 也會下載Dart 的兼容版本,故需把之前單獨下載的Dart 解除安裝

    https://ithelp.ithome.com.tw/upload/images/20200916/20118479mUJ1HRAuZ7.png

    輸入指令:

    flutter --version
    

    即可看到我們Flutter 的版本資訊

    https://ithelp.ithome.com.tw/upload/images/20200916/2011847957PmED7SIK.png

    這樣也就代表我們已成功安裝完Flutter SDK了,我們也可以透過下Flutter 指令,確認我們Flutter 環境上還缺少甚麼 → flutter doctor

    https://ithelp.ithome.com.tw/upload/images/20200916/20118479mSbEhC1kBk.png

    這邊因為我的環境已經架設完畢,flutter doctor會幫我檢查並告訴我說環境並沒有任何問題

Step 3. 建置Flutter 的Android 環境

安裝Android Studio

順帶一提,在目前開發Flutter 上,官方推薦Android Studio或是Visual Studio Code這兩套IDE,由於我對Android Studio 比較熟悉,之後開發也將以Android Studio 為範例,所以等一下也會在Android Studio 上安裝開發Flutter 所需要的東西。

首先,去官網下載最新版本的Android Studio,下載完後開啟Android Studio,開啟Android Studio 是不會有 Start a new Flutter project 的選項來給我們新增Flutter 專案的 (這邊會有是因為我已經安裝完),所以我們要在Android Studio 上安裝Flutter

首先點擊Configure,並點選Preferences
https://ithelp.ithome.com.tw/upload/images/20200916/20118479Q2B57crPmJ.png

在左邊清單選擇Plugins後,搜尋Flutter 並安裝,安裝過程會詢問是否也安裝Dart,選擇同意並安裝,安裝成功後重新啟動Android Studio
https://ithelp.ithome.com.tw/upload/images/20200916/20118479qe6BPS7PqF.png

現在就會出現Start a new Flutter project 的選項來給我們新增Flutter 專案了,點擊後會看到預設選擇為Flutter Application,繼續按下一步
https://ithelp.ithome.com.tw/upload/images/20200916/201184790BTP7eRqjE.png

可以設定專案名稱,儲存的位置等等,其中注意Flutter SDK path 為我們上面建置的路徑相同。

之後,按下一步
https://ithelp.ithome.com.tw/upload/images/20200916/201184799SWsc7a7bW.png

按完成,Android Studio 就會建立出一個Flutter 專案囉

安裝Android SDK

在開啟的Android專案後,點選Tools
https://ithelp.ithome.com.tw/upload/images/20200916/20118479j8Cu9d2lxC.png

選擇SDK Manager後,選擇要安裝的版本,可以選最新的版本
https://ithelp.ithome.com.tw/upload/images/20200916/20118479ERCGBBOfFR.png
在隔壁標籤頁 SDK Tools,一樣選擇版本最新的,之後按OK就會開始下載並更新
https://ithelp.ithome.com.tw/upload/images/20200916/20118479HrYRqjebLm.png
更新完成後,可以打開terminal,並下指令叫flutter doctor 檢查,會發現SDK版本會更新成剛剛設定的版本
https://ithelp.ithome.com.tw/upload/images/20200916/20118479p8fjj0f2tW.png

若出現License 的問題,照著錯誤訊息走,輸入指令 flutter doctor --android-licenses 後,出現條款要同意的話,輸入y同意即可,也可以再叫flutter doctor 確認檢查,會發現已經沒問題了

安裝Android 模擬器

在開啟的Android專案後,點選Tools,選擇AVD Manager
https://ithelp.ithome.com.tw/upload/images/20200916/20118479rzgTAIzTxs.png

點選Create Virtual Device
https://ithelp.ithome.com.tw/upload/images/20200916/20118479OgSvsqB02P.png

選擇模擬器類型後,點選下一步https://ithelp.ithome.com.tw/upload/images/20200916/20118479K85pQQiFnS.png

選擇要在模擬器上運行的作業系統,建議選新一點的,沒下載過的版本可以點選Download下載,載完後點選下一步
https://ithelp.ithome.com.tw/upload/images/20200916/20118479e0xbwmnh8Q.png

可編輯模擬器的名字,確認後按完成
https://ithelp.ithome.com.tw/upload/images/20200916/201184792PrKfbeU3W.png

剛剛建立的模擬器就會出現在AVD Manger裡了
https://ithelp.ithome.com.tw/upload/images/20200916/20118479ZAgTDGot9a.png

按下右邊的play按鈕,模擬器就會打開了。

回到我們的專案,只要按下run按鍵,就可以用我們剛剛建立的模擬器跑我們的範例專案了,可參考Android Studio toolbar
https://ithelp.ithome.com.tw/upload/images/20200916/20118479b3xoKNeEzt.png
https://ithelp.ithome.com.tw/upload/images/20200916/201184791Hy4Zw46sU.png

這樣我們的Android 環境就建置完成了!

Step 4. 建置Flutter 的iOS 環境

參考官網上的iOS setup,首先先在AppStore 安裝Xcode,安裝完後,需要開啟Xcode同意License條款,同意後打開終端機,輸入指令

 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

會要你輸入密碼,輸入時不會顯示在螢幕上,小心輸入正確密碼即可

之後,回到我們的Android Studio,打開iOS 模擬器
https://ithelp.ithome.com.tw/upload/images/20200916/20118479upAXrLiVvI.png
iOS 模擬器就打開囉

之後切換到iOS 模擬器,把專案run在上面試試看吧
https://ithelp.ithome.com.tw/upload/images/20200916/20118479SAvNha3EXP.png

成功:
https://ithelp.ithome.com.tw/upload/images/20200916/20118479YXR8Ie3v9X.png

總結

隨時想確認環境有沒有問題都可以在終端機叫flutter doctor ,若照上面的步驟走有出現問題,也歡迎提問,看到問題不用害怕,可以嘗試著去解決,相信以後踏進Flutter 這個領域,會充滿各式各樣的挑戰,期許自己慢慢養成面對問題,解決問題,享受解決問題成功的成就感吧!

接下來會花個幾天來學習一下Dart 語言,有程式基礎的相信都能很快上手,內容不會到很深,剛學程式的人如果還有不懂,或者是想再更深入了解的話,建議可以去官網補充不足的地方,後面內容會從基本觀念開始,搭配自己練習,應該都不會有問題,多花點心思,打好基礎,相信對未來會有幫助的。


上一篇
Day01 初探 Flutter
下一篇
Day03 Dart 語言介紹(一) 基本資料類型、變數、常數
系列文
從零開始的Flutter世界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言